<template>
  <div class="container">
    <div class="top">
      请绑定您本人银行卡
    </div>
      <!-- 表单 -->
  <view class='add_form'>
    <view class='add name'>
      <label><text>*</text>真实姓名</label>
      <input type='text' maxlength='6' placeholder-class='placecolor' bindinput='setName' placeholder='请输入你的真实姓名'></input>
    </view>
    <view class='add banknum'>
      <label><text>*</text>身份证号</label>
      <input type='idcard' maxlength='20' placeholder-class='placecolor' bindinput='setIdcard' placeholder='请输入你的身份证号'></input>
    </view>
    <view class='add banknum'>
      <label><text>*</text>银行卡号</label>
      <input type='number' maxlength='25' placeholder-class='placecolor' bindinput='setBankNum' placeholder='请输入你的银行卡号'></input>
    </view>
    <view class='add banknum'>
      <label><text>*</text>银行名称</label>
      <input type='text' maxlength='20' placeholder-class='placecolor' bindinput='setBankName' placeholder='请输入你的银行名称'></input>
    </view>
    <view class='add banknum'>
      <label><text>*</text>预留手机号</label>
      <input type='number' maxlength='11' placeholder-class='placecolor' bindinput='setPhone' placeholder='请输入银行预留手机号'></input>
    </view>
    <view class='add banknum'>
      <label><text class="over">*</text>开户行</label>
      <input type='text' maxlength='50' placeholder-class='placecolor' bindinput='setBankCity' placeholder='开户行地址非必填'></input>
    </view>
  </view>
    <div class="sub-btn"
         @click="save()">
      确认添加
    </div>
  </div>
</template>


<script>
import common from "@/assets/js/mmk_common.js";
export default {
  data () {
    return {
      user_name: "",
      card_num: ""
    };
  },
  methods: {
    save () {
      if (this.user_name.trim() == "") {
        common.mmk_Loading(2, "请输入持卡人姓名")
        return false;
      } else if (this.card_num.trim() == "") {
        common.mmk_Loading(2, "请输入银行卡卡号")
        return false;
      } else {
        common.mmk_Loading(0)
        common.fly_post("api/v4_5/user_cards/create", {
          card_num: this.card_num,
          realname: this.user_name
        }, result => {
          common.mmk_Loading(1)
          let res = result.data;
          if (res.status_code == 0) {
            wx.showToast({
              title: "添加成功", //提示的内容,
              icon: "success", //图标,
              duration: 2000, //延迟时间,
              mask: true, //显示透明蒙层，防止触摸穿透,
              success: res => {
                wx.navigateBack({
                  delta: 1 //返回的页面数，如果 delta 大于现有页面数，则返回到首页,
                });
              }
            });
          } else {
            common.mmk_Loading(2, res.message)
          }
        })
      }
    }
  },
  onLoad () {
    wx.setNavigationBarTitle({
      title: "添加银行卡"
    });
    Object.assign(this.$data, this.$options.data());
  }
};
</script>

<style lang="less" scoped>
.container {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  background: #F5F6F7;
  .top {
    height: 37px;
    padding-left: 15px;
    line-height: 37px;
    font-size: 12px;
    font-family: "Medium";
    font-weight: 500;
    color: rgba(136, 136, 136, 1);
  }
  /* 表单 */
.add_form{
  padding: 30rpx;
}
.add_form .add{
  display: flex;
  height:100rpx;
  line-height: 100rpx;
border-radius:10rpx;
margin-bottom: 20rpx;
padding: 0 12rpx;
background: #fff;
}
.add_form .add label{
  width: 210rpx;
  font-size:30rpx;
  color:#666;
}
.add_form .add label text.over{
  visibility:hidden
}
.add_form .add label text{
  color: #FF383E;
}
.add_form .add.noMargin{
  margin-bottom: 0;
  position: relative;
  border-radius: 10rpx 10rpx 0 0;
}
.add_form .add.noRadius{
  border-radius: 0 0 10rpx 10rpx;
}
.add_form .add.noMargin::after{
  content: '';
  width:630rpx;
height:2rpx;
background:rgba(231,231,231,1);
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
}
.add_form .add input{
  height: 100rpx;
  line-height: 100rpx;
  font-size: 30rpx;
  color:#666;
}
  .tips {
    box-sizing: border-box;
    padding: 10px 12px;
font-size: 13px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #CE9335;
line-height: 18px;
    background: #FFF6D3;
  }
  .sub-btn {
    text-align: center;
      width:690rpx;
  height:88rpx;
  line-height: 88rpx;
background: #3EB0A9;
box-shadow: 0px 8px 14px 0px rgba(14,26,128,0.03);
border-radius: 4px;
filter: blur(0px);
  font-size:30rpx;
  color:rgba(255,255,255,1);
  position: absolute;
  bottom: 84rpx;
  left: 50%;
  transform: translateX(-50%)
  }
}
</style>

